<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于导航轮播，广告展示等场景
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-swiper :list="list" :autoplay="false"></fu-swiper>
		</fu-section>
		
		<fu-section title="方形" customClass="fu-m-t-20" type="line">
			<fu-swiper :list="list" mode="rect"></fu-swiper>
		</fu-section>
		
		<fu-section title="点" customClass="fu-m-t-20" type="line">
			<fu-swiper :list="list" mode="dot"></fu-swiper>
		</fu-section>
		
		<fu-section title="数值" customClass="fu-m-t-20" type="line">
			<fu-swiper :list="list" mode="number"></fu-swiper>
		</fu-section>
		
		<fu-section title="隐藏指示器" customClass="fu-m-t-20" type="line">
			<fu-swiper :list="list" mode=""></fu-swiper>
		</fu-section>
		
		<fu-section title="轮播标题" customClass="fu-m-t-20" type="line">
			<fu-swiper :list="list" :showTitle="true" mode=""></fu-swiper>
		</fu-section>
		
		<fu-section title="指示器设置在右上角" customClass="fu-m-t-20" type="line">
			<fu-swiper :list="list" mode="dot" indicatorPosition="topRight"></fu-swiper>
		</fu-section>
		
		<fu-section title="3D切换效果" customClass="fu-m-t-20" type="line">
			<fu-swiper :list="list" :effect3D="true" bgColor="transparent"></fu-swiper>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';

	// data数据
	const list = reactive([
		{image: 'https://img2.baidu.com/it/u=3007539749,409021639&fm=253&fmt=auto&app=138&f=JPEG?w=1371&h=500', title: '女鞋'},
		{image: 'https://img1.baidu.com/it/u=2274889956,637406548&fm=253&fmt=auto&app=138&f=JPEG?w=1372&h=500', title: '化妆品'},
		{image: 'https://img0.baidu.com/it/u=1668763775,3866587994&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500', title: '家居'}
	]);
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>